import { getCookieData } from '@/utils/auth'
const resizeElTableHeightMixin = {
  data() {
    return {
      tableHeight: undefined,
      showHeader: true,
      showTagsView: true
    }
  },
  mounted() {
    var localShowHeader = getCookieData('showHeader')
    var localShowTagsView = getCookieData('tagsView')
    if (localShowHeader) {
      this.showHeader = localShowHeader === 'true'
    }
    if (localShowTagsView) {
      this.showTagsView = localShowTagsView === 'true'
    }
    // 初始计算高度
    this.calculateTableHeight();
    // 监听窗口大小变化
    window.addEventListener('resize', this.calculateTableHeight);
    window.addEventListener('keydown', this.handleKeyPress);
    this.bus.$on('showHeader', (val) => {
      this.showHeader = val
      this.calculateTableHeight()
    });
    this.bus.$on('showTagsView', (val) => {
      this.showTagsView = val
      this.calculateTableHeight()
    });
    this.bus.$on('showSearch', () => {
      this.calculateTableHeight()
    });
    this.bus.$on('searchMore', () => {
      this.calculateTableHeight()
    });
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', this.calculateTableHeight);
    window.removeEventListener('keydown', this.handleKeyPress);
    this.bus.$off('showHeader', {})
    this.bus.$off('showTagsView', {})
    this.bus.$off('showSearch', {})
    this.bus.$off('searchMore', {})
  },
  methods: {
    calculateTableHeight() {
      var queryHeight, paginationHeight, toolHeight, fixedHeader, tagsViewHeight;
      this.$nextTick(() => {
        var queryContainer = document.querySelector('.query-container')
        var toolContainer = document.querySelector('.tool-container')
        var paginationContainer = document.querySelector('.el-pagination')
        if (this.showHeader) {
          fixedHeader = 50
        } else {
          fixedHeader = 0
        }
        if (this.showTagsView) {
          tagsViewHeight = 34
        } else {
          tagsViewHeight = 0
        }
        if (queryContainer) {
          queryHeight = queryContainer.offsetHeight
        } else {
          queryHeight = 0
        }
        if (toolContainer) {
          toolHeight = toolContainer.offsetHeight
        } else {
          toolHeight = 0
        }
        if (paginationContainer) {
          paginationHeight = 25
        } else {
          paginationHeight = 0
        }
        const dynamicHeight = fixedHeader + tagsViewHeight + queryHeight + toolHeight + paginationHeight
        const windowHeight = window.innerHeight
        this.tableHeight = windowHeight - dynamicHeight - 60
        if (this.tableHeight < 200) {
          this.tableHeight = 200
        }
      })
    },
    handleKeyPress(event) {
      // 检查按下的键是否是 F12 或 F11
      if (event.key === 'F12' || event.keyCode === 123) {
        this.calculateTableHeight()
      }
      if (event.key === 'F11' || event.keyCode === 122) {
        this.calculateTableHeight()
      }
    }
  }
};
export default resizeElTableHeightMixin
